<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-12 17:20:18
 * @LastEditTime: 2023-11-21 19:41:50
 * @LastEditors: sueRimn
-->


<template>
  <view class='phone-box'>
    <view class='title d-flex justify-content-between align-items-center'>
      商品信息
      <view class="text" @click="$emit('handleAttr')">我的评估项</view>
    </view>
    <view class='item'>
      <view class='phone-info d-flex' v-if="orderProduct.productId">
        <view class="image">
          <common-image
            :src="orderProduct.productImage ? orderProduct.productImage + '?x-oss-process=image/resize,m_fill,h_150,w_150' : ''"
            :styles="'width: 150rpx; height: 150rpx; display: block; border-radius: 12rpx;mix-blend-mode: multiply;'" />
        </view>
        <view class="info">
          <view class="name">{{ orderProduct.productName }}</view>
          <view class="tag">{{ orderDetail.orderTypeText }}</view>
        </view>
      </view>

  
    </view>

    <view>
      <!-- <evaluate-project-layer ref="evaluateProjectRef" :orderProduct="orderProduct" /> -->

    </view>
  </view>
</template>

<script>
import EvaluateProjectLayer from './EvaluateProjectLayer.vue';

export default {
  components: { EvaluateProjectLayer },
  props: {
    orderDetail: { type: Object, default: {} },
    orderProduct: { type: Object, default: {} },
  },

  computed: {
    returnSkuAttrText() {
      let text = ''
      if (this.orderProduct.skuAttrs && this.orderProduct.skuAttrs.length) {
        this.orderProduct.skuAttrs.forEach(element => {
          text += `${element.attrName}：${element.valueContent}；`
        });
      }
      return text
    }
  },

  methods: {
    // 查看估价选项
    handleAttrClick() {
      this.$refs.evaluateProjectRef.onOpen()
    }
  }
}

</script>

<style lang="scss" scoped>
.phone-box {
  padding: 32rpx;
  background-color: #ffffff;
  margin: 20rpx auto 20rpx;
  border-radius: 20rpx;
  box-shadow: #efefef 0 0 30rpx;

  .title {
    font-size: var(--hui-font-size-32);
    color: var(--hui-color-title);
    margin: 0 0 40rpx 0;
    font-weight: bold;
    .text {
      font-size: var(--hui-font-size-24);
      color: var(--hui-color-subtitle);
      font-weight: normal;
    }
  }

  .item {
    .phone-info {
      .image {
        background: #F7F7F7;
        border-radius: 16rpx;
      }

      .info {
        width: 520rpx;
        padding-left: 20rpx;

        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: var(--hui-color-title);
          line-height: 42rpx;
          margin: 4rpx 0 14rpx;
        }

        .tag {
          border: 1px solid var(--hui-color-border);
          line-height: 38rpx;
          width: 140rpx;
          border-radius: 20rpx;
          text-align: center;
          color: var(--hui-color-subtitle);
          font-size: var(--hui-font-size-24);

        }
      }
    }

    .price {
      padding: 5rpx 0 10rpx;

      .item {
        line-height: 52rpx;

        .label {
          font-size: 26rpx;
          color: #111;
        }

        .value {
          font-size: 24rpx;
          color: #515151;
        }
      }
    }

    .total {
      display: none;
      margin: 20rpx 0 0 0;

      .order-price.item {
        border-top: 1rpx solid #f8f8f8;

        .label {
          font-size: var(--hui-font-size-32);
          color: var(--hui-color-title);
        }

        .value {
          color: rgb(246, 99, 53);
          font-size: var(--hui-font-size-32);
        }
      }

      .item {
        line-height: 60rpx;

        .label {
          font-size: var(--hui-font-size-26);
          color: var(--hui-color-title)-light;
        }

        .yuan {
          font-size: var(--hui-font-size-xs);
        }

        .value {
          color: var(--hui-color-title);
          font-size: var(--hui-font-size-28);
        }
      }
    }
  }
}</style>